<template>
    <div class="box">
        <el-card class="l">
            <h4>调试</h4>
            <el-divider/>
            <h5>加密</h5>
            <el-divider/>
            <div>
                <el-form label-width="100px">
                    <el-form-item label="自定义密钥" v-if="false">
                        <el-input v-model="encrypt.key"/>
                    </el-form-item>
<!--                    <el-form-item label="私钥">-->
<!--                        <el-input v-model="encrypt.privateKey"/>-->
<!--                    </el-form-item>-->
                    <el-form-item label="待加密文本">
                        <el-input type="textarea" v-model="encrypt.text" rows="20"/>
                    </el-form-item>
                    <el-form-item label="加密结果" v-if="encrypt.result">
                        <el-input type="textarea" readonly v-model="encrypt.result"/>
                    </el-form-item>
                    <div>
                        <el-button @click="doEncrypt" type="primary">加密</el-button>
                    </div>
                </el-form>
            </div>
<!--            <h5>解密</h5>-->
<!--            <el-divider/>-->
<!--            <div>-->
<!--                <el-form label-width="100px">-->
<!--                    <el-form-item label="私钥">-->
<!--                        <el-input v-model="decrypt.privateKey"/>-->
<!--                    </el-form-item>-->
<!--                    <el-form-item label="待解密文本">-->
<!--                        <el-input type="textarea" v-model="decrypt.text"/>-->
<!--                    </el-form-item>-->
<!--                    <el-form-item label="解密结果" v-if="decrypt.result">-->
<!--                        <el-input type="textarea" readonly v-model="decrypt.result"/>-->
<!--                    </el-form-item>-->
<!--                    <div>-->
<!--                        <el-button @click="doDecrypt" type="primary">解密</el-button>-->
<!--                    </div>-->
<!--                </el-form>-->
<!--            </div>-->
        </el-card>
        <el-card class="r">
            <h4>Java代码示例</h4>
            <el-divider/>
            <code-editor ref="editor" class="editor h-100" v-model="editorContent"
                         language="java" theme="dracula" readonly></code-editor>
        </el-card>
    </div>
</template>

<script>
    import CodeEditor from "./code-editor";
    export default {
        name: "sm3",
        components: {CodeEditor},
        data(){
            return {
                editorContent: "",
                encrypt:{
                    // privateKey: "",
                    key: "",
                    text: "",
                    result: ""
                },
                // decrypt: {
                //     privateKey: "0B1CE43098BC21B8E82B5C065EDB534CB86532B1900A49D49F3C53762D2997FA",
                //     text: "",
                //     result: ""
                // }
            }
        },
        async mounted() {
            var r = await import("./code/sm3")
            var code = r.default.split("\n")
                .map(e => e.trim())
                .filter(e => e)
                .join("\n")
            this.editorContent = code
            console.log(code)
        },
        methods:{
            async doEncrypt(){
                var r = await this.$post("/api/sm3/doEncrypt", this.encrypt)
                this.encrypt.result = r.result
            },
            // async doDecrypt(){
            //     var r = await this.$post("/api/sm2/doDecrypt", this.decrypt)
            //     this.decrypt.result = r.result
            // }
        }
    }
</script>

<style scoped>
    h5,h4{
        text-align: left;
    }
    .box{
        display: flex;
        flex-direction: row;
    }
    .l{
        flex: 1;
        margin: 5px;
    }
    .r{
        flex: 1;
        margin: 5px;
    }
</style>
